<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Carousel</title>
    <link rel="stylesheet" href="css/index.css" type="text/css">
</head>
<body>
    <div id="wrap">
        <div class="carouselBox" id="first-box">
            <ul>
                <li><a href="#"><img src="images/1a.jpg" alt="图片1"/></a></li>
                <li><a href="#"><img src="images/2a.jpg" alt="图片2"/></a></li>
                <li><a href="#"><img src="images/3a.jpg" alt="图片3"/></a></li>
                <li><a href="#"><img src="images/4a.jpg" alt="图片4"/></a></li>
                <li><a href="#"><img src="images/5a.jpg" alt="图片5"/></a></li>
            </ul>
        </div>
    </div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>
<script>
    $(document).ready(function () {
        var b = $(".carouselBox");
        var config = {
            box_w:560,
            box_h:300,
            img_num:5,
            trigger_type:"mouseover"
        };
        var c = new Carousel(b.eq(0),config);
    });
</script>
</body>
</html>